import { createElement, createTextNode } from "./vdom/index";
import { logger } from "./utils/index";

// 挂载页面
export function renderMixin(Vue) {
	// 给原型上挂上创建虚拟dom的方法
	// _c 创建元素或者组件的虚拟节点
	Vue.prototype._c = function () {
		return createElement(this, ...arguments);
	};

	// _v 创建文本的虚拟节点
	Vue.prototype._v = function (text) {
		return createTextNode(text);
	};
	// _s JSON.stringify
	Vue.prototype._s = function (val) {
		return val === null
			? ""
			: typeof val === "object"
			? JSON.stringify(val)
			: val;
	};

	Vue.prototype._render = function () {
		const vm = this;
		const { render } = vm.$options;
		if (render) {
			// 从实例上取值生成虚拟dom {{name}} -> vm.name
			let vNode;
			try {
				vNode = render.call(vm);
			} catch (err) {
				// 模板错误信息
				// vNode = createElement(
				// 	this,
				// 	"h1",
				// 	{
				// 		style: {
				// 			color: "red",
				// 			display: "flex",
				// 			"justify-content": "center",
				// 			"align-items": "center",
				// 			"min-height": "100vh",
				// 		},
				// 	},
				// 	createTextNode(`出错了${err.message}`)
				// );
				console.log(err);
				logger.error(err.message);
			} finally {
				return vNode;
			}
		}
	};
}
